<template>
  <header class="admin-header">
    <img class="logo" src="/icon.png" />
    <a-menu v-model="current" mode="horizontal">
      <a-menu-item key="mail"> <a-icon type="mail" />Refresh </a-menu-item>
      <a-menu-item key="app"> <a-icon type="appstore" />Back </a-menu-item>
    </a-menu>
    <div style="float: right;">
      <a-avatar icon="user" />
      <a-dropdown>
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="1"> <a-icon type="user" />个人中心 </a-menu-item>
          <a-menu-item key="2"> <a-icon type="user" />修改密码 </a-menu-item>
          <a-menu-item key="3"> <a-icon type="user" />注销 </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px;">
          Dapianzi Carl <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>
  </header>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'AdminLayoutHeader',
  data: () => {
    return {
      current: [],
    }
  },
  computed: {
    ...mapState('admin', ['user']),
    ...mapGetters('admin', ['unRead']),
  },
  mounted() {
    if (!this.$store.state.user) {
      // try to login via localstorage
      if (this.$storage.get('admin-user')) {
        // auth
        this.$store.commit('admin/INIT_USER', this.$storage.get('admin-user'))
      } else {
        this.$nuxt.context.redirect('/admin/login')
      }
    }
  },
  methods: {
    handleMenuClick(key) {
      this.$log(key)
    },
  },
}
</script>
<style>
.admin-header {
  height: 60px;
}
</style>
